<template>
  <div class="content-wrapper">
    <m-startorder :startOrder="stod"></m-startorder>
  	<mt-header fixed title="订单"></mt-header>
    <div class="content-wrapper-context">
    	<mt-cell title="当前订单" is-link :to="{path:'/home/list/order/' + $store.state.order.activeorder.orderid,query:{orderid: $store.state.order.activeorder.orderid, ordered: $store.state.order.activeorder.orderstate, truckload:$store.state.order.activeorder.truckload, kilometre: $store.state.order.activeorder.kilometre}}" :value="$store.state.order.activeorder.ordertitle"></mt-cell>
    	<div class="orderlist-wrapper">
    		<div class="orderlist-wrapper-nav">
    			<mt-navbar v-model="$store.state.navlist.order.selected">
				  <mt-tab-item :id="ordernav.id" v-for="ordernav,index in $store.state.navlist.order.navlist" :key="index">{{ordernav.title}}</mt-tab-item>
				</mt-navbar>
				<div class="orderlist-wrapper-nav-optin">
    				<div class="nav-optin-section">
    					<a href="javascript:;" @click="refreshlist">
    						<span class="icon-refresh-o" :class="{refreshicon: refresh}" style="line-height: 1.5;"></span>
    					</a>
    				</div>
    			</div>
    		</div>
    		<div class="orderlist-wrapper-navcontent">
    			<mt-tab-container v-model="$store.state.navlist.order.selected">
				  <mt-tab-container-item :id="$store.state.navlist.order.navlist[0].id">
				    <div class="orderlist-alive" v-if="preorderlist">
				    	<mt-cell v-for="preorder, index in preorderlist" :title="preorder.id" is-link :to="{path:'/home/list/preorder/' + preorder.id,query:{id: preorder.id, kilometre: preorder.kilometre, truckload: preorder.truckload, isEmergency: preorder.isEmergency}}" :value="'距离:' + preorder.kilometre + ' 装载量:' + preorder.truckload" :key="index" :label="preorder.isEmergency === 1 ? '加急' : ''" :class="{'hurry': preorder.isEmergency === 1}" />
				    </div>
				    <div class="orderlist-die" v-else>
				    	小主，列表丢了
				    </div>
				  </mt-tab-container-item>
				  <mt-tab-container-item :id="$store.state.navlist.order.navlist[1].id">
            <div class="orderlist-alive" v-if="hisorderlist">
					   <mt-cell v-for="hisorder,hisindex in hisorderlist" :title="hisorder.id" is-link :to="{path:'/home/list/hisorder/' + hisorder.id,query:{ordermsg: hisorder}}" :value="'距离:' + hisorder.kilometre + ' 装载量:' + hisorder.truckload" :key="hisindex" />
            </div>
            <div class="orderlist-die" v-else>
              小主，列表丢了
            </div>
				  </mt-tab-container-item>
				</mt-tab-container>
    		</div>
    	</div>
    </div>
    <transition>
	   <router-view/>
	  </transition>
  </div>
</template>

<script>
import axios from '@/api/axios';
import {mapGetters, mapMutations} from 'vuex';
import mStartorder from '@/components/basecom/startOrder';
export default {
	data: function () {
		return {
			preorderlist: null,
      hisorderlist: null,
      timer: null,
      refresh: false
		}
	},
	created: function () {
		if(this.getSartOrder()){
      this.getNowOrder();
			this.getpreorder();
      this.gethisorder();
		}
	},
	methods: {
    getNowOrder: function () {
      var setting = {
            method: 'POST',
            url: '/getAlreadyOrderInfo'
          };
      var data = {
            phone: this.getId()
          };
      axios((res) => {
        if(res.code === 0) {
          var msg = res.data;
           var option = {
                     id: msg.id,
                     orderid: msg.id,
                     orderstate: true,
                     ordertitle: msg.id,
                     truckload: msg.truckload,
                     kilometre: msg.kilometre
                   };
          this.setAcorder(option);
          this.setAcOrderMsg(msg.datalist);
        }
      }, {setting, data});
    },
		getpreorder: function () {
      var userid = this.getId();
			var setting = {
				method: 'GET',
				url: '/getTruckOrder/' + userid
			};
			axios.call(this, (res) => { 
				if(res.code === 0) {
          let data = res.data;
          data.forEach((item) => {
            item.isEmergency === 1 ? item.isEmergency = 1 : item.isEmergency = 0;
          });
					this.preorderlist = data.sort((itemprev, itemnext) => {
            let isEmergencyp = itemprev.isEmergency;
            let isEmergencyn = itemnext.isEmergency;
            return isEmergencyn - isEmergencyp; // 升序
          });
				}else {
          if(res.code === 402) {
            this.preorderlist = null;
          }else {
            this.$toast('列表拉取失败');
          }
				}
        this.refresh = false;
			 }, {setting: setting});
		},
    gethisorder: function () {
      var userid = this.getId();
      var setting = {
        method: 'GET',
        url: '/getHistoricalOrder/' + userid
      };
      axios.call(this, (res) => { 
        if(res.code === 0) {
          this.hisorderlist = res.data;
        }
       }, {setting: setting});
    },
    refreshlist: function () {
      clearTimeout(this.timer);
      this.refresh = true;
      this.timer = setTimeout(() => {
        this.getpreorder();
        this.gethisorder();
      }, 500);
    },
    ...mapGetters(['getId', 'getSartOrder']),
    ...mapMutations(['setAcorder', 'setAcOrderMsg'])
	},
  components: {
    mStartorder
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'getpreorder'
  },
  computed: {
    stod: {
      get: function () {
        return this.getSartOrder();
      }
    }
  }
}
</script>

<style>
  .orderlist-wrapper {
  	height: calc(100% - 48px);
  }
  .orderlist-wrapper-nav {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .orderlist-wrapper-navcontent {
  	height: calc(100% - 101px);
  }
  .orderlist-wrapper-navcontent .mint-tab-container {
  	overflow-y:auto;
  	height: 100%;
  }
  .orderlist-wrapper-navcontent .hurry span {
    color: red;
  }
  .orderlist-wrapper-nav-optin {
  	margin-top: 5px;
    height: 30px;
    line-height: 34px;
    display: flex;
    text-align: right;
    background-color: rgba(0,0,0,0.1);
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 20px;
  }
</style>
